<template>
  <div class="Header">
    <div class="logo">
      <h1>logo</h1>
    </div>
    <div class="Header_left">
      <!-- 展开闭合左边导航栏 -->
      <aside-icon />
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <transition-group name="breadcrumb">
          <el-breadcrumb-item
            v-for="(item, index) in breadcrumbList"
            :key="item.path"
            :to="
              index < breadcrumbList.length - 1 &&
              item.redirect.split('/')[1] != $route.path.split('/')[1] && {
                path: item.path,
              }
            "
            >{{ item.meta.title }}
          </el-breadcrumb-item>
        </transition-group>
      </el-breadcrumb>
    </div>
    <div class="Header_right">
      <el-autocomplete
        class="inline-input"
        v-model="search_text"
        :fetch-suggestions="querySearch"
        placeholder="请输入页面名称"
        :trigger-on-focus="false"
        @select="handleSelect"
      >
        <i class="el-icon-search el-input__icon" slot="suffix"></i>
      </el-autocomplete>
      <!-- <div class="icon">
        <i
          class="iconfont icon-sousuo"
          style="font-size: 26px; color: #333"
        ></i>
      </div> -->
      <div
        class="icon"
        @click="$route.path != '/tabs' && $router.push('/tabs')"
      >
        <el-tooltip
          class="item"
          effect="dark"
          content="消息提示"
          placement="bottom"
        >
        <el-badge is-dot class="item">
          <i
            class="iconfont icon-xiaoxi1"
            style="font-size: 20px; color: #333"
          ></i>
        </el-badge>
        </el-tooltip>
      </div>
      <div class="icon" @click="fullScreen">
        <el-tooltip
          class="item"
          effect="dark"
          content="全屏"
          placement="bottom"
        >
          <i
            class="iconfont icon-quanping"
            style="font-size: 20px; color: #333"
          ></i>
        </el-tooltip>
      </div>
      <!-- 右上角头像 -->
      <el-dropdown @command="removeToken">
        <div class="el-dropdown-link">
          <img :src="require('@/assets/logo.png')" alt />
          <i class="el-icon-caret-bottom"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-plus-outline"
            >螺蛳粉</el-dropdown-item
          >
          <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-check"
            >蚵仔煎</el-dropdown-item
          >
          <el-dropdown-item icon="el-icon-back" :command="'退出登录'"
            >退出登录</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import AsideIcon from "@/components/AsideIcon";
export default {
  data() {
    return {
      breadcrumbList: [],
      search_text: "",
      route_flat: [],
    };
  },

  components: {
    AsideIcon,
  },
  watch: {
    $route: {
      handler() {
        this.getBreadcrumb();
      },
      immediate: true,
    },
  },
  mounted() {
    var route_content = this.$router.options.routes.filter(
      (item) => item.path === "/"
    )[0].children;
    recursion.call(this, route_content);
    // 路由数据扁平化
    function recursion(arr) {
      arr.forEach((v) => {
        if (v.children) {
          // console.log(this.route_flat);
          this.route_flat.push({ value: v.meta.title, path: v.redirect });
          recursion.call(this, v.children);
        } else {
          // console.log(this.route_flat);
          this.route_flat.push({ value: v.meta.title, path: v.path });
        }
      });
    }
  },
  methods: {
    querySearch(queryString, cb) {
      var route_flat = this.route_flat;
      var results = queryString
        ? route_flat.filter(this.createFilter(queryString))
        : route_flat;
      results.length || (results = [{ value: "找不到相关页面" }]);
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !=
          -1
        );
      };
    },
    // 点击建议列表项
    handleSelect(item) {
      item.path == this.$route.path || this.$router.push(item.path);
      this.search_text = ''
    },
    // 全屏
    fullScreen() {
      var explorer = window.navigator.userAgent.toLowerCase();
      if (explorer.indexOf("chrome") > 0) {
        //webkit
        if (
          document.body.scrollHeight === window.screen.height &&
          document.body.scrollWidth === window.screen.width
        ) {
          exitFullscreen.call(this);
        } else {
          enterFullscreen.call(this);
        }
      } else {
        //IE 9+  fireFox
        if (
          window.outerHeight === window.screen.height &&
          window.outerWidth === window.screen.width
        ) {
          exitFullscreen.call(this);
        } else {
          enterFullscreen.call(this);
        }
      }
      function enterFullscreen() {
        var docElm = document.documentElement;
        //W3C
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        }
        //FireFox
        else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen();
        }
        //Chrome等
        else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen();
        }
        //IE11
        else if (docElm.msRequestFullscreen) {
          docElm.msRequestFullscreen();
        }
      }
      function exitFullscreen() {
        //W3C
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
        //FireFox
        else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        }
        //Chrome等
        else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
        //IE11
        else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      }
    },
    getBreadcrumb() {
      // 过滤出路由栈中含有meta.title的路由
      this.breadcrumbList = this.$route.matched.filter(
        (item) => item.meta && item.meta.title
      );
      // 如果第一个不是/home路由则手动加上
      if (this.breadcrumbList[0].path != "/home") {
        this.breadcrumbList = [
          {
            path: "/home",
            redirect: "",
            meta: { title: "首页", icon: "el-icon-s-help" },
          },
        ].concat(this.breadcrumbList);
      }
    },
    removeToken(type) {
      if (type === "退出登录") {
        sessionStorage.removeItem("juehm_token");
        this.$router.push({ path: "/login" });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.Header {
  display: flex;
  align-items: center;
  height: 100%;
  // box-shadow: 2px -1px 3px -2px #000000 inset !important;
  .logo {
    width: 200px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  &_left {
    display: flex;
    align-items: center;
    .el-breadcrumb {
      margin-left: 5px;
      flex-shrink: 0;
    }
  }
  &_right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 20px;
    padding-left: 20px;
    .icon,
    .el-autocomplete {
      margin-right: 15px;
    }
    .el-dropdown {
      &-link {
        display: flex;
        align-items: center;
        img {
          height: 40px;
          border-radius: 5px;
          display: block;
          margin-right: 6px;
        }
      }
    }
  }
}
</style>
<style>
/* 头部搜索款变圆角边框 */
.el-autocomplete input {
  border-radius: 16px;
}
@media screen and (max-width: 800px) {
  /* 头部搜索框隐藏 */
  .el-autocomplete {
    display: none !important;
  }
}
@media screen and (max-width: 700px) {
  /* 面包屑导航隐藏 */
  .Header .Header_left .el-breadcrumb {
    display: none;
  }
  /* 左侧导航栏隐藏 */
  .el-aside > .Aside {
    display: none;
  }
  .Header .Header_left .AsideIcon {
    display: none;
  }
  .Main .AsideIcon {
    display: block !important;
  }
}
</style>
